
<template>
    <layout class="container">
        <div class="wrapper">
            <div class="info">
                <van-cell-group>
                    <van-cell title="姓名:" :value="dataInfo.name"></van-cell>
                    <van-cell title="身份证号:" :value="dataInfo.idCard"></van-cell>
                    <van-cell title="所属预约号:" :value="dataInfo.applyId" />
                    <van-cell title="个人信息编号:" :value="infoNumber" />
                    <van-cell title="剩余次数:" :value="dataInfo.hsCounts" v-if="dataInfo.payState == 1"></van-cell>
                    <van-cell title="生成时间:" :value="dataInfo.time" v-if="dataInfo.payState == 1"></van-cell>
                </van-cell-group>
                <van-button class="againBuy" type="primary" v-if="dataInfo.payState == 1">再次购买</van-button>
            </div>

            <div class="qrcode-container">
                <div class="qrcode-wrapper">
                    <div ref="qrcode"></div>
                </div>
                <div class="tip">请截图保存改图片，以供工作人员录入信息！</div>
            </div>
            <div class="footer">
                <van-row class="footer-title">关联的公众号</van-row>
                <van-row class="content" type="flex" justify="space-between" align="center">
                    <van-col class="left">
                        <img src="../../assets/images/logo.png" alt="检测中心">
                    </van-col>
                    <van-col class="middle">
                        <div class="large">
                            康来智慧服务
                        </div>
                        <div class="mini">
                            全面了解检验项目临床的意义，做你身边...
                        </div>
                    </van-col>
                    <van-col class="right">
                        <van-button plain type="primary" @click="bindOfficial">关注</van-button>
                    </van-col>
                </van-row>
            </div>
        </div>
    </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import QRcode from "qrcodejs2"
import UserQRcodeApi from "@/api/userQRcode"
export default {
    name:"userQRcode",
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            applyUserId: "",
            dataInfo: {
                // name: "",
                // idCard: "",
                // applyId: "",
                // hsCounts: "",
                // time: "",
                // applyUserId: "",  //进来的时候路由携带的参数
                // payState: ""
            }
        }
    },
    // 监听属性 类似于data概念
    computed: {
        infoNumber() {
            return 'No.' + this.applyUserId
        }
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        init() {
            if (this.$route.query.code) {
                this.applyUserId = this.$route.query.code
                this.createQrcde()
                this.getData()
            }else{
                this.$dialog.alert({
                    title:"提示",
                    message:"请退出页面，重新进入，否者此次操作无效！"
                }).then(res=>{
                    window.close();
                    WeixinJSBridge.call('closeWindow');
                })

            }
        },
        getData() {
            let params = {
                applyUserId: this.applyUserId
            }
            UserQRcodeApi.getUserInfo(params).then(res => {
                this.dataInfo = res.data
            })
        },
        // 生成二维码函数
        createQrcde() {
            new QRcode(this.$refs.qrcode, {
                text: this.applyUserId,
                width: 220,
                height: 220,
                correctLevel: 3
            })
        },
        // 再次购买
        againBuy() {
            // 点击请求接口之后再执行微信支付
            let cond = {
                applyUserId: this.applyUserId
            }
            UserQRcodeApi.payAgain(cond)
                .then(res => {
                    if (res.status == 0 && res.data) {
                        let params = {
                            price: res.data.payAmount,
                            applyUserId: res.data.applyUserId
                        }
                        this.wxToPay(params)
                    } else {
                        this.$dialog.alert({
                            title: "提示",
                            message: res.msg
                        })
                    }

                })
                .catch(err => {
                    this.$dialog.alert({
                        title: "错误",
                        message: err
                    })
                })
        },
        // 微信支付
        wxToPay(infoData) {
            let params = {
                applyUserId: Number(infoData.applyUserId),
                actualPay: Number(infoData.price),
                payType: 1,
            };
            UserQRcodeApi.weixiPay(params).then(res => {
                if (res.status == 0) {
                    let payConfig = res.data;
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                        "appId": payConfig.appId,     //公众号ID，由商户传入
                        "timeStamp": payConfig.timeStamp,         //时间戳，自1970年以来的秒数
                        "nonceStr": payConfig.nonceStr, //随机串
                        "package": payConfig.package,
                        "signType": payConfig.signType,         //微信签名方式
                        "paySign": payConfig.paySign //微信签名
                    },
                        function (res) {
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                this.$toast({
                                    type: "success",
                                    messgae: "支付成功,二维码可再次核销"
                                })
                                getApplyUserMsg();
                            } else {
                                // 提示支付失败
                                deleteApplyUser(infoData.applyUserId);
                                this.$toast({
                                    type: "fail",
                                    message: "支付失败"
                                })
                                // alert("支付失败");
                            }
                        });
                } else {
                    this.$dialog.alert({
                        title: "提示",
                        message: res.msg
                    })
                }
            }).catch(err => {
                this.$dialog.alert({
                    title: "错误",
                    message: err
                })
            })

        },
        // 获取申请信息
        getApplyUserMsg() {
            let params = {
                applyUserId: this.applyUserId
            }
            UserQRcodeApi.getUserInfoByIdApi(params).then(res => {
                if (res.status == 0) {
                    this.dataInfo.hsCounts = res.data.hsCounts
                }
            })
        },
        // 删除申请用户
        deleteApplyUser(applyUserId) {
            let params = {
                id: Number(applyUserId),
                state: -1
            }
            UserQRcodeApi.deleteApplyUser(params).then(res => {
                this.$toast({
                    type: "success",
                    message: res.message
                })
                // alert(res.message)
            })
        },
        // 关联公众号
        bindOfficial() {
            var bindUrl = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAxODMwMTMxNw==&scene=124#wechat_redirect';
            window.location.href = bindUrl;
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init()
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发

}
</script>
<style lang="less" scoped>
.wrapper {
    margin: 0 auto;
    width: 93%;

    .info {
        margin: 10px 0;
        padding: 0 5px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 10%);
        overflow: hidden;
        .againBuy {
            width: 95%;
            display: block;
            border-radius: 10px;
            margin: 10px auto;
            font-size: 20px;
        }
    }

    .qrcode-container {
        background-color: white;
        margin: 10px 0;
        border-radius: 10px;
        padding: 10px 0;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 10%);

        .qrcode-wrapper {
            width: 220px;
            height: 220px;
            margin: 0 auto;

            &::v-deep {
                img {
                    width: 100%;
                }
            }
        }

        .tip {
            font-size: 18px;
            margin-top: 10px;
            color: red;
        }
    }

    .footer {
        background-color: white;
        border-radius: 10px;
        padding: 10px 15px;
        margin: 10px 0;
        font-size: 13px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 10%);
        .footer-title {
            color: #B6B6B6;
            padding-bottom: 10px;
        }

        .content {
            flex-wrap: nowrap;
            text-overflow: ellipsis;

            .left {
                img {
                    width: 50px;
                }
            }

            .middle {
                box-sizing: border-box;
                padding: 0 10px;

                .lagre {
                    font-size: 20px;
                }

                .mini {
                    font-size: 10px;
                    color: #B6B6B6;
                }
            }

            .right {
                .van-button {
                    width: 60px;
                    height: 25px;
                    border-radius: 4px;
                    font-size: 10px;
                }
            }
        }
    }

}
</style>
